<template>
    <div class="ivu-mt-16">
        <Row type="flex" :gutter="16">
            <Col span="13" style="padding-right:8px;border-right:1px solid #dcdee2">
                <Form :model="submitparams" :label-width="80" :rules="ruleValidate" ref="submitparams">
                    <FormItem label="发病时长">
                        <InputNumber v-width="120" @on-change="disabledfun" v-model="submitparams.sick_month" placeholder="请输入发病时长" :formatter="$inputday" :max="999" :min="0"></InputNumber>
                        <span class="ivu-ml-8">月</span>
                    </FormItem>
                    <FormItem label="主诉">
                        <Input v-model="submitparams.main_desc" @on-change="disabledfun" type="textarea" :rows="3" placeholder="请输入主诉"></Input>
                    </FormItem>
                    <FormItem label="现病史">
                        <Input v-model="submitparams.now_medical_history" @on-change="disabledfun" type="textarea" :rows="3" placeholder="请输入现病史"></Input>
                    </FormItem>
                    <FormItem label="治疗史">
                        <Input v-model="submitparams.clinic_history" @on-change="disabledfun" type="textarea" :rows="3" placeholder="请输入治疗史"></Input>
                    </FormItem>
                    <FormItem label="家族史">
                        <Input v-model="submitparams.family_history" @on-change="disabledfun" type="textarea" :rows="1" placeholder="请输入家族史"></Input>
                    </FormItem>
                    <FormItem label="体格检查">
                        <Input v-model="submitparams.physique_history" @on-change="disabledfun" type="textarea" :rows="1" placeholder="请输入体格检查"></Input>
                    </FormItem>
                    <Row type="flex" :gutter="16">
                        <Col span="12">
                            <FormItem label="病种" prop="patient_diseases_id" >
                                <Select v-model="submitparams.patient_diseases_id" v-width="150" placeholder="请选择病种"
                                    clearable
                                    @on-change="
                                        changediseases(
                                            submitparams.patient_diseases_id
                                        )
                                    ">
                                    <Option
                                        v-for="item in diseases"
                                        :disabled="+item.status === 0"
                                        :value="item.value"
                                        :key="item.value"
                                        >
                                        {{ item.label }}
                                    </Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="12" v-show="submitparams.patient_diseases_id" v-if="diseases_child.length>0">
                             <FormItem :label-width="0" prop="patient_diseases_child_id">
                                <Select
                                    v-width="150"
                                    v-model="submitparams.patient_diseases_child_id" placeholder="请选择病种"
                                    @on-change="disabledfun"
                                    clearable
                                >
                                    <Option
                                        v-for="item in diseases_child"
                                        :disabled="+item.status === 0"
                                        :value="item.value"
                                        :key="item.value"
                                        >
                                        {{ item.label }}
                                    </Option>
                                </Select>
                            </FormItem>
                        </Col>
                    </Row>
                    <FormItem label="部位" prop="body_parts_ids" v-show="+submitparams.patient_diseases_id===1" v-if="+submitparams.patient_diseases_id===1">
                        <TreeSelect
                            :max-tag-count="3"
                            @on-change="disabledfun"
                            v-model="submitparams.body_parts_ids"
                            placeholder="请选择部位"
                            :data="contlist"
                            filterable
                            multiple
                        />
                    </FormItem>
                    <FormItem label="部位" v-show="+submitparams.patient_diseases_id!==1">
                        <TreeSelect
                            :max-tag-count="3"
                            placeholder="请选择部位"
                            @on-change="disabledfun"
                            v-model="submitparams.body_parts_ids" 
                            :data="contlist"
                            filterable
                            multiple />
                    </FormItem>
                    <FormItem>
                        <Button type="primary" :disabled="disabled" @click="submitfun('submitparams')">保存</Button>
                    </FormItem>
                </Form>
            </Col>
            <Col span="11">
                <Row type="flex" v-if="imglist.length>0">
                    <Col span="8" class="ivu-mb-8" v-for="(item, index) in imglist" :key="index">
                        <div class="imgbox">
                            <img class="img" :src="item.file_url||item.thumb" alt="" @click="clickbigimg(item)">
                            <div class="imgbut" @click="delimg(item,index)">删除</div>
                        </div>
                    </Col>
                </Row>
                <div class="noContent" v-else>暂无病历图</div>
            </Col>
        </Row>
        
        <Modal v-model="pigimgmodel" title="查看大图" footer-hide>
            <img :src="src" style="width: 100%;" />
        </Modal>
    </div>
</template>
<script>
import {
    patientindexmedicalinfo,
    patientindexsearchchilddiseases,
    patientindexupdatemedical,
    patientindexdeletemedicalimg } from "@/api/hqapi";
export default {
    name: "casemessage",
    data() {
        return {
            
            ruleValidate: {
                body_parts_ids: [
                    {
                        required: true,
                        message: "请选择部位",
                        type: 'array',
                        trigger: "change",
                    },
                ],
                patient_diseases_id: [
                    {
                        required: true,
                        message: "请选择一级病种",
                        trigger: "change",
                    },
                ],
                patient_diseases_child_id: [
                    {
                        required: true,
                        message: "请选择二级病种",
                        trigger: "change",
                    },
                ],
            },
            disabled:true,
            params:{id:'', message_id:''},
            submitparams: {
                id: '',
                sick_month: null,
                main_desc: '',
                now_medical_history: '',
                clinic_history: '',
                family_history: '',
                physique_history: '',
                patient_diseases_id: '',
                patient_diseases_child_id: '',
                body_parts_ids: [],
            },
            contlist:[],
            diseases:[],
            diseases_child:[],
            imglist: [],
            pigimgmodel: false,
            muban:{
                sick_month: null,
                main_desc: '',
                now_medical_history: '',
                clinic_history: '',
                family_history: '',
                physique_history: '',
                patient_diseases_id: '',
                patient_diseases_child_id:'',
                body_parts_ids: [],
            },
            src:''
        };
    },
    // watch:{
    //     name1(){

    //     }
    // },
    methods: {        
        askData(id) {
            this.data = [];
            this.disabled = true
            this.submitparams.id = id;
            this.params.id = id;
            this.askDatas(id);
        },
        askDatas(id) {
            patientindexmedicalinfo({id}).then((res) => {
                this.submitparams.sick_month = res.sick_month||null
                this.muban.sick_month = res.sick_month||null
                this.submitparams.main_desc = res.main_desc
                this.muban.main_desc = res.main_desc
                this.submitparams.now_medical_history = res.now_medical_history
                this.muban.now_medical_history = res.now_medical_history
                this.submitparams.clinic_history = res.clinic_history
                this.muban.clinic_history = res.clinic_history
                this.submitparams.family_history = res.family_history
                this.muban.family_history = res.family_history
                this.submitparams.physique_history = res.physique_history
                this.muban.physique_history = res.physique_history
                this.submitparams.patient_diseases_id = res.patient_diseases_id+""
                this.muban.patient_diseases_id = res.patient_diseases_id+""
                this.changediseasesing(this.submitparams.patient_diseases_id)
                this.submitparams.patient_diseases_child_id = res.patient_diseases_child_id+""
                this.muban.patient_diseases_child_id = res.patient_diseases_child_id+""
                this.contlist = res.condition.body_parts
                this.submitparams.body_parts_ids = res.body_parts_ids
                this.muban.body_parts_ids = res.body_parts_ids
                this.diseases = res.condition.diseases
                this.imglist = res.image_list
            });
        },
        changediseases(pid) {
            this.disabled=false
            this.diseases_child = []
            this.submitparams.patient_diseases_child_id = ''
            patientindexsearchchilddiseases({ pid: pid }).then((res) => {
                this.diseases_child = res.list;
            })
        },
        changediseasesing(pid) {
            this.diseases_child = []
            this.submitparams.patient_diseases_child_id = ''
            patientindexsearchchilddiseases({ pid: pid }).then((res) => {
                this.diseases_child = res.list;
            })
        },
        disabledfun(){
            for (let item in this.muban) {
                if (this.muban[item] !== this.submitparams[item]) {
                    this.disabled = false
                    return
                }
            }
            this.disabled = true
        },
        clickbigimg(data){
            this.src = data.file_url||data.thumb
            this.pigimgmodel = true
        },
        delimg(data,index){
            this.$Modal.confirm({
                title: '删除提示？',
                content: '<p>是否确认删除，删除后将不在病历中展示，在聊天记录中可再继续添加至病历</p>',
                onOk: () => {
                    this.params.message_id = data.message_id
                    patientindexdeletemedicalimg(this.params).then(()=>{
                        this.imglist.splice(index,1)
                        this.$emit('patientfun')
                    })
                },
            });
        },
        submitfun(name){
            this.$refs[name].validate((valid) => {
                if (valid) {
                    let params = {
                        id: this.submitparams.id,
                        sick_month: this.submitparams.sick_month?this.submitparams.sick_month:'',
                        main_desc: this.submitparams.main_desc,
                        now_medical_history: this.submitparams.now_medical_history,
                        clinic_history: this.submitparams.clinic_history,
                        family_history:this.submitparams.family_history,
                        physique_history: this.submitparams.physique_history,
                        patient_diseases_id: this.submitparams.patient_diseases_id,
                        patient_diseases_child_id: this.submitparams.patient_diseases_child_id,
                        body_parts_ids: this.submitparams.body_parts_ids.join(',')
                    }
                    patientindexupdatemedical(params).then(res=>{
                        this.$Message.success({
                            content: '保存成功'
                        });
                        this.$emit('patientfun')
                        this.$emit('patientfuns')
                    })
                }
            })
        },
    },
};
</script>
<style scoped>
.imgbox{
    width: 120px;
    height: 180px;
    position: relative;
}
.img{
    width:120px;
    height:180px;
    object-fit: cover
}
.imgbut{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
    margin: auto;
    text-align: center;
    background: rgba(0,0,0,.5);
    display: none;
}
.imgbox:hover .imgbut{
    display: block;
}
.noContent {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
